<div class="p-2">
  <div class="inline-block border border-black shadow rounded">
    <div class="px-1 border-b border-black">
      <label>
        <input
          type="checkbox"
          [checked]="table.getIsAllColumnsVisible()"
          (change)="table.getToggleAllColumnsVisibilityHandler()($event)"
        />
        Toggle All
      </label>
    </div>

    @for (column of table.getAllLeafColumns(); track column.id) {
      <div class="px-1">
        <label>
          <input
            type="checkbox"
            [checked]="column.getIsVisible()"
            (change)="column.getToggleVisibilityHandler()($event)"
          />
          {{ column.id }}
        </label>
      </div>
    }
  </div>

  <div class="h-4"></div>
  <div class="flex flex-wrap gap-2">
    <button (click)="rerender()" class="border p-1">Regenerate</button>
    <button (click)="randomizeColumns()" class="border p-1">
      Shuffle Columns
    </button>
  </div>

  <table>
    <thead>
      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
        <tr>
          @for (header of headerGroup.headers; track header.id) {
            <th [attr.colSpan]="header.colSpan">
              @if (!header.isPlaceholder) {
                <ng-container
                  *flexRender="
                    header.column.columnDef.header;
                    props: header.getContext();
                    let header
                  "
                >
                  {{ header }}
                </ng-container>
              }
            </th>
          }
        </tr>
      }
    </thead>
    <tbody>
      @for (row of table.getRowModel().rows; track row.id) {
        <tr>
          @for (cell of row.getVisibleCells(); track cell.id) {
            <td>
              <ng-container
                *flexRender="
                  cell.column.columnDef.cell;
                  props: cell.getContext();
                  let cell
                "
              >
                {{ cell }}
              </ng-container>
            </td>
          }
        </tr>
      }
    </tbody>
    <tfoot>
      @for (footerGroup of table.getFooterGroups(); track footerGroup.id) {
        <tr>
          @for (header of footerGroup.headers; track header.id) {
            <th [attr.colSpan]="header.colSpan">
              @if (!header.isPlaceholder) {
                <ng-container
                  *flexRender="
                    header.column.columnDef.footer;
                    props: header.getContext();
                    let header
                  "
                >
                  {{ header }}
                </ng-container>
              }
            </th>
          }
        </tr>
      }
    </tfoot>
  </table>

  <div class="h-4"></div>
  <pre>{{ stringifiedColumnOrdering() }}</pre>
</div>
